<template>
  <div>
    <h1>我是子组件1</h1>
    <h2>abc==>{{ abc }},count==>{{ count }} , myName == >{{ myName }} ,myFirstName ===>{{ myFirstName}}</h2>
    <h2>msg==>{{ msg }}</h2>
    <h2>obj:{{ obj }},likes:{{ likes }},fn:{{ fn }},flag:{{ flag }}</h2>
    <div>{{initVal}}</div>
    <div>myName ==>{{ upperMyName }}</div>
  </div>
</template>
<script setup>
import {ref,onMounted,computed} from 'vue'
// 声明 porp
// defineProps(['abc','count'])
// props 只读 不能修改
const props = defineProps({
  // key 属性名称
  // value 对应的数据类型的构造函数
  // key:value
  abc:String,
  count:Number,
  myName:String,
  myFirstName:String,
  obj:Object,
  likes:Array,
  fn:Function,
  flag:Boolean

})

const initVal = ref(props.abc)
// console.log('props.myName==>',props.myName);
const upperMyName = computed(()=>props.myName.toUpperCase())
setTimeout(()=>{
  initVal.value = 'nihao'
},3000)
const msg = ref('hello');
// console.log("props==>",props);

// props.abc = 'nihao'
onMounted(()=>{
  // console.log("props==>",props);
})
</script>